<template>
  <div class="tinymce-box">
    <Editor v-model="contentValue" :init="initOption" :disabled="disabled" />
  </div>
</template>
<script>   
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入则不显示编辑器 
import { upload, action } from "@/util/http";
export default {
  name: 'RichText',
  components: {
    Editor
  },
  props: {
    //用于自定义v-model的value，这个名称是固定的
    modelValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave '
    },
    toolbar: {
      type: [String, Array],
      default: 'fullscreen undo redo restoredraft |  table image media charmap hr pagebreak insertdatetime print preview | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs'
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      initOption: {
        base_url: "/tinymce", //【必要参数】指定public的目录
        language: 'zh_CN',  //语言类型，默认会到tinymce/langs/zh_CN.js文件  
        //  skin_url: '/tinymce/skins/ui/oxide',  //皮肤：浅色
        // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
        plugins: this.plugins,  //插件配置
        toolbar: this.toolbar,  //工具栏配置，设为false则隐藏
        toolbar_mode: "sliding", //工具栏移除模式 floating / sliding / scrolling / wrap
        // menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”

        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',  //字体大小
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',  //字体样式
        lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5",  //行高配置，也可配置成"12px 14px 16px 20px"这种形式

        height: 400,  //注：引入autoresize插件时，此属性失效
        placeholder: '在这里输入文字',
        branding: false,  //tiny技术支持信息是否显示
        resize: false,  //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        elementpath: false,  //元素路径是否显示 
        content_style: "img {max-width:100%;}",  //直接自定义可编辑区域的css样式
        paste_data_images: true,  //图片是否可粘贴
        // images_upload_url:action,
        //自定义图片上传逻辑
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          console.log(upload);
          upload(action, formData).then((res) => {//upload这个是请求  action这个是路径
          console.log(res,"富文本上传文件");
            success(res.url);
          })
            .catch((err) => {
              console.log(err);
              failure(err.response.data.message);
            });

        }
      },
    }
  },
  computed: {
    //富文本框内容
    contentValue: {
      get() {//取值
        return this.modelValue;
      },
      set(value) {//赋值 
        this.$emit("update:modelValue", value)
      }
    }
  },
}
</script>
 

